@import "val";
.menu-bar {
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}

.menu-item {
  margin: 1rem;
  color: #fff;
  vertical-align: middle;
  i {
    vertical-align: middle;
    font-size: 1.2rem;
    margin-right: .5rem;
  }
  .menu-text {
    //padding: 1.2rem 1rem 1.2rem 2rem;
    padding: 1.8rem 0 1.4rem 0;
    font-size: 1.8rem;
    text-align: center;
    background: url("../images/ui/Btn.png") 0 0 / 100% 100%;
    cursor: pointer;
    color: #009cac;
    &.active {
      color: #fff;
      background: url("../images/ui/Btn_Chose.png") 0 0 / 100% 100%;

    }
  }
}

.sub-item {
  margin: .5rem 1rem;
  padding: .5rem 0rem;
  margin-bottom: 0;
  cursor: pointer;
  border: .1rem solid $light-text-color;
  text-align: center;
  font-size: 1rem;
  color: $light-text-color;
  display: inline-block;
  width: calc(50% - 2rem);
  border-radius: .4rem;
  &.active {
    color: #fff;
    background-color: rgba(54, 128, 136, 0.88);
    border: .2rem solid #009cac;
    text-decoration: none;
  }
}

.menu-content {
  max-height: 0;
  //transition: all .3s;
  overflow: hidden;
  padding-bottom: .1rem;
  &.active {
    //transition: max-height 0s;
    max-height: 9999px;
  }
}